<template>
	<view class="box">
		<!-- 导航栏 -->
		<navBar title='关注' :isSlot="false" :isNav="true"></navBar>

		<view class="myFollow" v-for="item in followUser" :key="item.id">
			<image :src="item.user.avatar"></image>
			<view class="myFollowRight">
				<view class="myFollowRightL">
					<text>{{item.user.name}}</text>
					<text>{{item.user.desc}}</text>
				</view>
				<view class="myFollowRightR">
					<view class="myFollowRightRText">
						<u-icon name="list" color="#333" size="20"></u-icon>
						<text>已关注</text>
					</view>
				</view>
			</view>
		</view>
		<view class="foot">

		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'

	import {
		getLikeUser
	} from "@/config/api.js"

	export default {
		data() {
			return {
				followUser:[]
			};
		},
		onLoad() {
			this.initGetLikeUser()
		},
		methods: {
			async initGetLikeUser() {
				const res = await getLikeUser(this.userInfo.token)
				this.followUser = res.data.data.rows
				console.log(this.followUser);
			}
		},
		computed: {
			...mapState(['userInfo'])
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		padding: 3vw;

		.myFollow {
			width: 100%;
			height: 10vh;
			margin-top: 5vw;
			display: flex;
			align-items: center;
			justify-content: space-between;

			image {
				width: 20vw;
				height: 20vw;
				border-radius: 50%;
			}

			.myFollowRight {
				display: flex;
				align-items: center;
				border-bottom: 1px solid #dee1e6;

				.myFollowRightL {
					width: 50vw;
					height: 8vh;
					display: flex;
					flex-direction: column;
					justify-content: space-evenly;
				}

				.myFollowRightR {
					flex: 1;

					.myFollowRightRText {
						color: #333;
						display: flex;
						align-items: center;
						justify-content: space-evenly;
						margin-right: 2vw;
						width: 20vw;
						height: 8vw;
						background-color: #dee1e6;
						border-radius: 5px;
					}
				}
			}
		}

		.foot {
			width: 100%;
			height: 10vh;
		}
	}
</style>
